<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="${staticServer}/inc/style/main.css"/>
	<link rel="stylesheet" href="${staticServer}/inc/style/page.css"/>
	<link rel="stylesheet" href="${staticServer}/css/consultant_client.css"/>
	<link rel="stylesheet" href="${staticServer}/inc/style/date/datepicker.css" />
	<script src="${staticServer}/inc/js/jquery.js"></script>
	<script src="${staticServer}/inc/js/pageset.js"></script>
	<script src="${staticServer}/inc/js/datepicker.js"></script>
	<script src="${staticServer}/js/web/system_reserve_stat.js?1.0"></script>
	<script src="${staticServer}/js/web/echarts.js"></script>
	<!--<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>-->
	<script src="${staticServer}/js/web/esl.js"></script>
</head>

<body>
	<div id="home_link">
		<ul>
			<li>竞思教育网络办公系统 v2.0 beta</li>
			<li>&gt;</li>
			<li>咨询师</li>
			<li>&gt;</li>
			<li class="current">客户资源统计</li>
		</ul>
	</div>
	<div id="container">
		<div id="title">客户资源统计</div>
		
		<table class="form_table">
			<tbody>
			<tr class="even_row">
				<td>
					<label><b>查询条件：</b></label>
					<label for="start_date">截止日期：</label>
					<#--<select id="time">
						<option value="2014-12">2014</option>
						<option value="2015-12">2015</option>
						<option value="2016-12">2016</option>
						<option value="2017-12">2017</option>
					</select>-->
               <input type="text" id="time" size="15" value="${time}" rel="DATE::Y-m"/>
               <select id="region">
					<#if olist??>
						<option value="">全部</option>
						<#list olist as list>
							<option value="${list.keyname}">${list.name}</option>
						</#list>
					</#if>
					</select>
					<input type="button" value=" 查 询 " onclick="selectMsg()">
				</td>
			</tr>
			</tbody>
		</table>
		
		<table>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月统计：
			<tr>
				<div id="month" style="height:400px"></div>
			</tr>
		</table>
	</div>
</body>

<script>
	$(function(){
		$("#time").val("${time}");
		$("#region").val("${region}");
	});
	
	var selectMsg = function(){
		var time = $("#time").val();
		window.location.href=encodeURI("${contextPath}/index/system_center_zhuzhuang2.htm?time="+time+"&region="+$("#region").val());
	}
	
	require.config({
        paths:{ 
            'echarts' : 'http://echarts.baidu.com/build/echarts',
            'echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts'
        }
    });
    
    // 月统计
    var datas1 = [${monthTotal}];
    var datas2 = [${monthActual}];

    require(
        [
            'echarts',
            'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
        ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('month')); 
            
            var option = {
                tooltip: {
                    show: true
                },
                legend: {
                    data:['应到','实到']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {readOnly:false},
                        magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },   calculable : true,
                dataZoom : {
                    show : true,
                    realtime : true,
                    /*  start : 40,
                    end : 60*/
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [${month}]
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        "name":"应到",
                        "type":"line",
                        "data":datas1
                    },
                    {
                        "name":"实到",
                        "type":"line",
                        "data":datas2
                    }
                ]
            };
    
            // 为echarts对象加载数据 
            myChart.setOption(option); 
        }
    );

    var ecConfig = require('echarts/config');
    function eConsole(param) {
        var mes = '【' + param.type + '】';
        if (typeof param.seriesIndex != 'undefined') {
            mes += '  seriesIndex : ' + param.seriesIndex;
            mes += '  dataIndex : ' + param.dataIndex;
        }
        if (param.type == 'hover') {
            document.getElementById('hover-console').innerHTML = 'Event Console : ' + mes;
        }
        else {
            document.getElementById('console').innerHTML = mes;
        }
        console.log(param);
    }
    myChart.on(ecConfig.EVENT.CLICK, eConsole);
    myChart.on(ecConfig.EVENT.DBLCLICK, eConsole);
    myChart.on(ecConfig.EVENT.HOVER, eConsole);
    myChart.on(ecConfig.EVENT.DATA_ZOOM, eConsole);
    myChart.on(ecConfig.EVENT.LEGEND_SELECTED, eConsole);
    myChart.on(ecConfig.EVENT.MAGIC_TYPE_CHANGED, eConsole);
    myChart.on(ecConfig.EVENT.DATA_VIEW_CHANGED, eConsole);

	</script>
</html>